@use "sass:math";
@import "../basic/mixins.config";

$steps-line-unactive: $grey300;
$step-point-size: 20;
$step-point-size-xs: 10;
.ju-steps {
  display: flex;


  .step-item {
    position: relative;
    flex: 2;


    &.active {
      color: $primary;

      &::before {
        background-color: $primary;
      }

      .step-num {
        color: #fff;
        background-color: $primary;
      }
    }

    &.done {
      color: $primary;

      &::before {
        background-color: $primary;
      }

      .step-num {
        color: #fff;
        background-color: $primary;
      }
    }

    &::before {
      content: '';
      display: block;
      background-color: $steps-line-unactive;
      height: units(math.div($step-point-size,5));
      width: 100%;
      position: absolute;
      top: units(math.div($step-point-size,2 ) - math.div($step-point-size,10));

    }

    &::after {
      display: none;
    }

    &:first-child {
      flex: 1;

      &::before {
        left: 0;
      }
    }

    + .step-item {
      text-align: center;
    }

    &:last-child {
      flex: 1;
      text-align: right;

      &::before {
        right: 0;
      }
    }

    .step-content {
      margin-top: units(5);
    }

    .step-num {
      width: units($step-point-size);
      height: units($step-point-size);
      background-color: $steps-line-unactive;
      display: inline-block;
      text-align: center;
      border-radius: 100%;
      line-height: units($step-point-size);
      position: relative;
      z-index: 1;
      font-size: units(12);
    }
  }

  &.steps-vertical {
    display: block;
    width: 100%;

    &.vertical-md {
      .step-item {
        min-height: units(100);
      }
    }

    &.vertical-lg {
      .step-item {
        min-height: units(150);
      }
    }

    .step-item {
      display: flex;
      align-items: flex-start;
      min-height: units(50);

      &::before {
        display: none;
      }

      &::after {
        content: '';
        display: block;
        position: absolute;
        background-color: $steps-line-unactive;
        width: units(1);
        height: 100%;
        left: units(math.div($step-point-size,2)) !important;
      }

      &:last-child {
        .step-num {
          top: 0 !important;
        }

        &::after {
          display: none;
        }
      }

      .step-content {
        padding: 0 units(10);
        flex: 1;
        width: 0;
        text-align: left;
      }
    }


    &.step-point {
      .step-num {
        width: units($step-point-size-xs) !important;
        height: units($step-point-size-xs) !important;
        right: units(-.5*$step-point-size-xs);
      }

      .step-item {
        + .step-item {
          .step-num {
            top: units(.25*$step-point-size-xs);
          }
        }
      }
    }
  }

}
